<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div>
            <form id="search-form"
                  class="layui-form layui-form-pane"
                  lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="keyword"
                                   placeholder="名称、uri、权限"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button"
                                id="reset-btn"
                                class="layui-btn layui-btn-warm">
                            <i class="layui-icon layui-icon-refresh"></i> 重 置 </button>
                        <button type="submit"
                                id="search-btn"
                                class="layui-btn layui-btn-normal"
                                lay-submit lay-filter="search-btn">
                            <i class="layui-icon layui-icon-search"></i> 搜 索 </button>
                    </div>
                </div>
            </form>
        </div>

        <table class="layui-hide" id="data-table" lay-filter="data-table"></table>

        <script type="text/html" id="data-toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"
                        lay-event="add" id="add-btn"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn layui-btn-disabled"
                        lay-event="remove" id="remove-btn"> 删除 </button>
                <button class="layui-btn layui-btn-sm data-add-btn layui-btn-disabled"
                        lay-event="fold" id="fold-btn"> 折叠全部 </button>
                <button class="layui-btn layui-btn-sm data-add-btn layui-btn-disabled"
                        lay-event="expand" id="expand-btn"> 展开全部 </button>
            </div>
        </script>

        <script type="text/html" id="data-tool">
            <a class="layui-btn layui-btn-normal layui-btn-xs"
               lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger"
               lay-event="remove">删除</a>
        </script>
    </div>
</div>

<script>
    class SysResourcePage extends ListPage {
        constructor() {
            super({
                title: '资源',
                uri: 'sysResources/list',
                tree: {
                    iconIndex: 1,
                    isPidData: true,
                    idName: 'id',
                    pidName: 'parentId'
                },
                cols: [[
                    {type: 'checkbox', align: 'center'},
                    {field: 'name', title: '名称', align: 'left'},
                    {field: 'uri', title: 'uri', align: 'center'},
                    {field: 'permission', title: '权限', align: 'center'},
                    {field: 'icon', title: '图标', align: 'center',
                        templet: (d) => {
                            return d.icon ? `<i class="${d.icon}"></i>` : ''
                        }
                    },
                    {field: 'type', title: '类型', align: 'center',
                        templet: (d) => {
                            switch (d.type) {
                                case 0: return '<span class="layui-badge layui-bg-black">目录</span>'
                                case 1: return '<span class="layui-badge-rim">菜单</span>'
                                case 2: return '<span class="layui-badge layui-bg-gray">按钮</span>'
                            }
                        }
                    },
                    {field: 'sn', title: '序号', align: 'center'},
                    {title: '操作', minWidth: 150, toolbar: '#data-tool', align: "center"}
                ]],
                saveUri: 'sysResources/save',
                removeUri: 'sysResources/remove',
                savePageUri: 'page/sys/resource/save.html'
            })
        }

        _initSaveForm() {
            super._initSaveForm()

            this._loadParents()
        }

        _loadParents() {
            if (this._parents) {
                this._buildParents()
                return
            }
            Ajaxs.get({
                uri: 'sysResources/listParents',
                success: (response) => {
                    this._parents = response.data
                    this._buildParents()
                }
            })
        }

        _buildParents() {
            const select = new Select({
                form: this._saveForm,
                name: 'parentId'
            })
            const data = Commons.deepCopy(this._parents)
            data.unshift({
                name: '无父资源'
            })
            select.data(data, (o) => {
                let text = o.data.name
                if (o.data.id) {
                    const type = o.data.type === ResourceType.DIR ? '目录' : '菜单'
                    text = `【${type}】` + o.data.name
                }

                return {
                    text,
                    val: o.data.id
                }
            })

            if (this._editData) {
                select.val(this._editData.parentId)
            }
        }
    }

    new SysResourcePage()
</script>